<template>
  <div class="headerbox">
    <div>
      <i class="el-icon-arrow-left" style="cursor: pointer;padding-right:20px;"
        @click="$router.push('/mainexam/modelindex')"></i>
      项目列表
      <!-- <el-divider direction="vertical"></el-divider> -->
      <!-- <el-select v-model="casename" placeholder="请选择" @change="projectChangeValue" style="width:300px;">
        <el-option v-for="item in examlist" :key="item.nav5id" :label="item.navsname" :value="item.nav5id">
        </el-option>
      </el-select>
      <el-divider direction="vertical" style="padding-right:15px;"></el-divider>
      <el-select v-model="modelname" placeholder="请选择" @change="modelChangeValue" style="width:100px;">
        <el-option v-for="item in modellist" :key="item.itemCaseFlagId" :label="item.itemCaseFlagName"
          :value="item.itemCaseFlagId">
        </el-option>
      </el-select> -->
    </div>
    <span @click="$router.push('/mainexam/modelindex')" style="cursor: pointer;">返回首页</span>
  </div>
</template>

<script>
// import { getExamList, modelItemcaselist, getitemcaseflagImage } from '../api/api.js'
export default {
  data () {
    return {
      casename: '',
      examconobj: {},
      examobj: {
        page: 1,
        pagesize: 500,
        itemname: '',
        startdate: '',
        enddate: ''
      },
      examlist: [],
      modellist: [],
    }
  },
  mounted () {
    this.examconobj = JSON.parse(sessionStorage.getItem('examContent'));
    this.casename = JSON.parse(sessionStorage.getItem('examContent')).navsname
    this.examclicklist()
    this.modelItemcaselistclick(this.examconobj.nav5id)
  },
  methods: {
    projectChangeValue (val) {
      console.log(val);

      // 先调用modelItemcaselistclick获取模板列表，然后取第一个itemCaseFlagId
      this.modelItemcaselistclick(val).then(() => {
        // 从模板列表中取第一个对象的itemCaseFlagId
        if (this.modellist && this.modellist.length > 0) {
          const firstItemCaseFlagId = this.modellist[0].itemCaseFlagId;
          console.log('第一个itemCaseFlagId:', firstItemCaseFlagId);
          // 调用getitemcaseflagImage API
          this.getItemCaseFlagInfoRequest(firstItemCaseFlagId);
        }
      });

      this.$emit('examchangevalue', val)
    },
    modelChangeValue (val) {
      console.log(val);
      // 直接调用getitemcaseflagImage API
      this.getItemCaseFlagInfoRequest(val);
      this.$emit('examchangevalue', val)
    },
    // getItemCaseFlagInfo请求方法
    getItemCaseFlagInfoRequest (itemCaseflagid) {
      console.log(itemCaseflagid, 'itemCaseflagid');

      let obj = {
        itemCaseflagid: itemCaseflagid
      }
      getitemcaseflagImage(obj).then(res => {
        console.info('getItemCaseFlagInfo response:', res)
        if (res.code == 0) {
          // 处理返回的数据
          console.log('模板数据:', res.obj)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //获取项目列表
    examclicklist () {
      getExamList(this.examobj).then(res => {
        console.info(res)
        if (res.code == 0) {
          this.examlist = res.obj.results.filter(item => item.type != 2)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //获取模板列表
    modelItemcaselistclick (id) {
      let obj = {
        nav5id: id
      }
      return modelItemcaselist(obj).then(res => {
        console.info(res)
        if (res.code == 0) {
          this.modellist = res.obj
          // 设置默认选中第一个模板
          if (res.obj && res.obj.length > 0) {
            this.modelname = res.obj[0].itemCaseFlagId
          }

          // 添加安全检查，避免undefined错误（如果URL中有指定的模板ID，优先使用）
          if (this.$route.query.modelid) {
            const foundItem = res.obj.find(item => item.itemCaseFlagId == this.$route.query.modelid)
            if (foundItem) {
              this.modelname = foundItem.itemCaseFlagId
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

<style scoped>
.headerbox {
  min-width: 1200px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background: #165DFF;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
}

.headerbox>>>.el-select {
  /* margin-right: 20px; */
  background: none;
  color: #fff;
}

.headerbox>>>.el-select .el-input__inner {
  background: none;
  color: #fff;
  border: none;
  padding: 0;
}

.headerbox>>>.el-select .el-input .el-select__caret {
  color: #fff;
}
</style>